// 样式-表格-body
import React, { useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import Editor from './Editor';
import InputColorPicker from './InputColorPicker';
import { InputNumber } from 'antd';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const TableBody = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;
	const [ backgroundColor, setBackgroundColor ] = useState( config.style.tableBodyBackground || 'rgba(134,188,37,1)' );

	const handleChangeBgColorComplete = ( color ) => {
		// console.log( color, backgroundColor );
		setBackgroundColor( color );
		form.setFieldsValue( { tableBodyBackground: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ) , 'style' );
	};

	useEffect( () => {
		setBackgroundColor( config.style.tableBodyBackground || 'rgba(134,188,37,1)' );
	} ,[ config ] );

	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold',
		'fontItalic', 'underline', 'AlignHor' ];

	// console.log( config );
	return (
		<div>
			<FormItem label="表格背景色" name="tableBodyBackground" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={backgroundColor}
					change={handleChangeBgColorComplete}
				></InputColorPicker>
			</FormItem>
			<FormItem label="字体" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor config={config} form={form} onValuesChange={onValuesChange} 
					fontFamilyName="tableBodyFontFamily" fontSizeName="tableBodyFontSize" fontColorName="tableBodyFontColor"
					boldName="tableBodyIsBold" italicName="tableBodyIsItalic" underLineName="tableBodyIsUnderLine"
					alignHorName="tableBodyAlignHor" alignVerName="tableBodyAlignVer" fontConfig={fontConfig}/>
			</FormItem>
			<FormItem label="单元格上下间距（px）" name="tablePaddingTopBottom" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="默认是16" />
			</FormItem>
			<FormItem label="单元格左右间距（px）" name="tablePaddingLeftRight" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="默认是16" />
			</FormItem>
		</div>
	);
};

export default React.memo( TableBody );
